<template>
	<view>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm font-sub-title">
				<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
				签约护士
			</view>
		</view>
		<uni-nav-bar :fixed="true" color="#333333" background-color="#427EE3" :border="false" :style="{marginTop:navHeight}">
			<view class="input-view">
				<uni-icons type="search" size="22" color="#878A99" />
				<input v-model="searchVal" confirm-type="search" class="input font-normal" type="text" placeholder="搜索护士姓名/手机" @confirm="search">
				<uni-icons :color="'#878A99'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clear" />
			</view>
		</uni-nav-bar>
		<view class="cu-list menu sm-border">
			<view class="block">
				<!-- 当前城市 -->
				<view class="area borderBottom" id="area">
					<view class="title-wrapp">
						<view class="title">
							<text class="l font-normal">
								当前：
								<text>{{ hospitalName }}</text>
							</text>
							<text class="r font-small" :class="{ isHide: isToggle }" @click="isToggle = !isToggle">
								切换医院
								<text :class="isToggle ? 'cuIcon-unfold' : 'cuIcon-right'"></text>
							</text>
						</view>
					</view>
					<view class="ul" v-if="isToggle">
						<view class="li" hover-class="hover" :class="{ active: hospitalId == item.HOSPITAL_ID }" v-for="item in hospitalList"
						 :key="item.HOSPITAL_ID" @click="selectHospital(item)">
							{{ item.HOSPITAL_NAME }}
						</view>
					</view>
				</view>
			</view>
			<view class="block" v-if="hospitalId!=''&&departmentList.length!=0">
				<!-- 当前城市 -->
				<view class="area borderBottom" id="area">
					<view class="title-wrapp">
						<view class="title">
							<text class="l font-normal">
								当前：
								<text>{{ departmentName }}</text>
							</text>
							<text class="r font-small" :class="{ isHide: isToggleDepart }" @click="isToggleDepart = !isToggleDepart">
								切换科室
								<text :class="isToggleDepart ? 'cuIcon-unfold' : 'cuIcon-right'"></text>
							</text>
						</view>
					</view>
					<view class="ul" v-if="isToggleDepart">
						<view class="li" hover-class="hover" :class="{ active: departmentId == item.HOSPITALDEPARTMENT_ID }" v-for="item in departmentList"
						 :key="item.HOSPITALDEPARTMENT_ID" @click="selectDepartment(item)">
							{{ item.DEPARTMENT_NAME }}
						</view>
					</view>
				</view>
			</view>
			<view class="text-right">
				<button class="cu-btn bg-blue margin-right font-normal" style="border-radius: 0;" @tap="multiSearch()" >搜索</button>
				<button class="cu-btn bg-grey margin-right font-normal" style="border-radius: 0;" @tap="reset()">重置</button>
			</view>
			<view class="cu-item bg-white">
				<view class="content">
					<text class="text-red font-normal">{{title}}</text>
				</view>
			</view>
			<view v-if="varList.length==0"  class="no_data">
				<image src="../../static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
				<view class="font-sub-title">暂无数据</view>
			</view>
			<view v-else class="cu-item bg-white arrow" @tap="jump('/pages/signDoctor/detail',data)" v-for="data in varList">
				<view class="content">
					<text class="text-lg font-normal">{{data.name}}({{data.position}})</text>
				</view>
				<view class="action text-right">
					<text class="font-small">{{data.departmentName}}</text>
					<view class="font-small line-hight-1">{{data.hospitalName}}</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<biaofun-loading-more v-if="varList.length!=0"  :loading="loading" :loadall="loadAll"></biaofun-loading-more>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import biaofunLoadingMore from '@/components/biaofun-loading-more/biaofun-loading-more.vue';
	import {
		mapGetters
	} from 'vuex'
	var that;
	export default {
		components: {
			uniNavBar
		},
		computed:{
			...mapGetters(['navHeight']),
		},
		watch:{
			hospitalId(val) {
				this.departmentId='',
				this.departmentName="请选择科室"
				this.$http.getDepartmentList({
					hospitalId:val
				}).then((res)=>{
					if(res.code==1){
						that.departmentList=res.result
					}
				})
			}
		},
		data() {
			return {
				title:'热门推荐',
				searchVal: '',
				statusBarHeight:Vue.prototype.StatusBar,
				varList:[],
				hospitalName:'请选择医院',
				hospitalList:[],
				hospitalId:'',
				departmentName:'请选择科室',
				departmentList:[],
				departmentId:'',
				isToggle:false,
				isToggleDepart:false,
				user:'',
				pageNum:1,
				pageSize:20,
				loading: false, // 正在加载中？
				loadAll: false, // 加载了全部数据？
			}
		},
		async onReachBottom() {
			// 判断是否加载完了全部数据
			if(!this.loadAll) {
				// 查询列表数据
				this.getData(that.searchVal,that.hospitalId,that.departmentId);
			}
		},
		onLoad(){
			that = this;
			this.user = uni.getStorageSync("userInfo")
			this.getData()
			this.$http.getHospitalList({}).then((res)=>{
				if(res.code==1){
					that.hospitalList=res.result
				}
			})
		},
		onShow() {
			this.user = uni.getStorageSync("userInfo")
		},
		methods: {
			multiSearch(){
				this.varList=[]
				this.pageNum=1
				this.title="搜索结果"
				this.getData(this.searchVal,this.hospitalId,this.departmentId)
			},
			reset(){
				this.hospitalId=''
				this.departmentId=''
				this.searchVal=''
				this.hospitalName="请选择医院"
				this.departmentName="请选择科室"
				this.departmentList=[]
				this.varList=[]
				this.pageNum=1
				this.title="热门推荐"
				this.isToggle=false
				this.isToggleDepart=false
				this.getData('','','')
			},
			selectHospital(item){
				this.hospitalName = item.HOSPITAL_NAME
				this.hospitalId = item.HOSPITAL_ID
			},
			selectDepartment(item){
				this.departmentId = item.HOSPITALDEPARTMENT_ID;
				this.departmentName  = item.DEPARTMENT_NAME
			},
			back(){
				uni.navigateBack();
			},
			getData(searchVal,hospitalId,departmentId){
				this.$http.queryMedicalStaff({
					staffType:"2",
					myself:"2",
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					keyword:searchVal,
					hospital:hospitalId,
					department:departmentId
				}).then((res)=>{
					if(res.code==1){
						that.varList=that.varList.concat(res.result.list);
						if(!res.result.hasNextPage){
							// 更新 loadAll 状态
							that.loadAll = true;
							// 更新 loading 状态
							that.loading = false;
						}
						// 否：还没有加载完全部数据
						else {
							// 更新 loadAll 状态
							that.loadAll = false;
							// 更新 loading 状态
							that.loading = false;
							// 将下次请求的页数+1
							that.pageNum = that.pageNum + 1;
						}
					}else{
						uni.showToast({
							"title":res.message,
							"position":"bottom",
							"icon":"none"
						})
					}
				})
			},
			search(){
				this.varList=[]
				this.pageNum=1
				this.title="搜索结果"
				this.getData(that.searchVal,'','')
			},
			clear(){
				this.varList=[]
				this.searchVal = ""
				this.pageNum=1
				this.title="热门推荐"
				this.getData('',this.hospitalId,this.departmentId)
			},
			jump(path,data) {
				uni.navigateTo({
					url: path+"?params="+JSON.stringify(data)+"&type=2"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.action{
		color:#878A99
	}
	.no_data{
		margin-top: 70rpx;
	}
	.no_data_img{
		margin-top: 70rpx;
	}
	
	
	.block {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	
	.borderBottom {
		position: relative;
	
		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: #c1c2cd;
			transform: scaleY(0.5);
		}
	}
	
	.area {
		padding-bottom:20rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		.title-wrapp {
			position: sticky;
			top: 0;
			left: 0;
			background: #fff;
		}
	
		.title {
			width: 100%;
			box-sizing: border-box;
			font-size: 40rpx;
			font-weight: 500;
			color: #222;
			font-size: 30rpx;
			font-weight: 500;
			display: inline-flex;
			justify-content: space-between;
			align-items: center;
	
			.r {
				color: #8e8f97;
				display: inline-block;
				align-items: center;
	
				.iconfont {
					font-size: 24rpx;
				}
			}
		}
	
		.ul {
			display: flex;
			flex-wrap: wrap;
	
			.li {
				padding: 0 10rpx;
				box-sizing: border-box;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 26rpx;
				color: #222;
				border-radius: 10rpx;
				margin: 20rpx 20rpx 0 0;
				background: #f4f5f9;
	
				&.active {
					font-weight: 500;
					background: #649df1;
					color:white;
				}
			}
		}
	}
</style>
